<script lang="ts" setup>
import "@/utils/rem"
import { reactive, ref, onMounted } from "vue"
import { formatDateTime } from "@/utils"
// import { showToast } from "vant"
import { getOrderH5DataApi } from "@/api/order/index"
import { showToast } from "vant"

const formData = reactive({
  cardId: "",
  mobile: ""
})
const list = ref<any>([])
const loading = ref(false)
const len = ref<number>(0)
const num = ref<any>("")
const curOrderId = ref<any>("")
const curId = ref<any>("")
const getInfo = async () => {
  const regMath = /^[A-Za-z0-9]+$/
  const PReg =
    // /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
    /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  if (!PReg.test(formData.mobile)) {
    showToast("手机号格式错误！")
    return
  }
  if (formData.cardId.length != 6 || !regMath.test(formData.cardId)) {
    showToast(`请按照要求输入身份证后6位`)
    return
  }
  await getOrderH5DataApi({
    cardId: formData.cardId,
    mobile: formData.mobile
  })
    .then((res: any) => {
      console.log(res)
      if (res.code == 200 && res.data.length) {
        len.value = res.data.length
        list.value = res.data
        num.value = res.data.length
        if (res.data[0].state.state === "受理失败") {
          curId.value = res.data[0].id
          curOrderId.value = res.data[0].orderId
          onLoad(res.data[0].id, res.data[0].orderId)
        }
      } else {
        showToast(`暂无相关数据`)
        list.value = []
        num.value = ""
      }
    })
    .catch(() => {
      len.value = 0
      list.value = []
      num.value = ""
    })
    .finally(() => {
      loading.value = false
    })
}
// md5.appendAsciiStr(`helloworld`)
const onSubmit = async () => {
  await getInfo()
}
/**查询团队客服链接 */
import { useRouter } from "vue-router"
import { getEwmUrl } from "@/api/combo-h5"
const router = useRouter()
const tid = router.currentRoute.value.query.tid
const serverLink = ref("")
const getEwmPop = () => {
  getEwmUrl({ userId: tid }).then((res: any) => {
    if (res.code == 200) {
      serverLink.value = res.data.serviceLink
    }
  })
}
getEwmPop()

onMounted(() => {
  document.title = "订单查询"
})
/**推荐套餐相关 */
import { getRecommendH5List2, getChangeRecord } from "@/api/order"

const list1 = ref<any>([])
const curPage = ref<number>(1)
const total = ref<number>(0)
const BASEURL = `${import.meta.env.VITE_BASE_API}/image/`
const onLoad = async (id: any, orderId: any) => {
  await getRecommendH5List2({
    id,
    orderId,
    page: curPage.value,
    size: 2
  })
    .then((res: any) => {
      if (res.code == 200) {
        list1.value = res.data.orderList || []
        total.value = res.data.total
      }
    })
    .catch(() => {
      list1.value = []
    })
}
/**推荐套餐 换一批 */
const changeCombo = () => {
  curPage.value++
  if (curPage.value > Math.ceil(total.value / 2)) {
    curPage.value = 1
  }
  onLoad(curId.value, curOrderId.value)
}
/**END */
/**切换套餐相关 */
import { createOrderH5DataApi } from "@/api/order"
import { showConfirmDialog } from "vant"

const curObj = ref<any>(null)
const sureChnage = (item: any) => {
  curObj.value = item
  console.log(item)
  showConfirmDialog({
    title: "切换产品",
    message: `是否确认切换该产品【${item.name}】？`
  })
    .then(() => {
      createOrderH5DataApi({
        ...curObj.value.map,
        changeFlag: "change"
      }).then((res: any) => {
        if (res.code == 200) {
          showToast("切换成功")
          getInfo()
        } else {
          showToast(res.message)
        }
      })
    })
    .catch(() => {
      // on cancel
    })
}
// 切换记录
const changeRecordList = ref<any>([])
const showChangeRecord = ref(false)
const changeRecord = (item: any) => {
  showChangeRecord.value = true
  getChangeRecord({
    id: item.id,
    orderId: item.orderId
  })
    .then((res: any) => {
      if (res.code == 200) {
        changeRecordList.value = res.data.list
      }
    })
    .catch(() => {
      changeRecordList.value = []
    })
}
/**E N D */

defineOptions({
  name: "OrderSearch"
})
</script>
<template>
  <div style="max-width: 750px; margin: 0 auto" class="bg">
    <div style="text-align: center">
      <img src="@/assets/layout/ordersearch.jpg" alt="" style="width: 229px; height: 229px" />
    </div>
    <div class="form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <h2 style="font-size: 18px; padding: 0.2rem; text-align: center">查询您的号卡订单</h2>
          <van-field v-model="formData.mobile" name="联系电话" label="联系电话" placeholder="下单联系号码" />
          <van-field v-model="formData.cardId" name="身份证" label="身份证" placeholder="请输入身份证后6位" />
          <div style="margin: 16px; background-color: #fff">
            <van-button round block type="primary" native-type="submit"> 查 询 </van-button>
            <van-button
              round
              block
              icon="service-o"
              type="primary"
              style="vertical-align: middle; margin-top: 0.2rem"
              :url="serverLink"
              >联系客服</van-button
            >
          </div>
        </van-cell-group>
      </van-form>
      <div v-if="num" style="overflow-y: auto; padding-bottom: 0.1rem" class="orderInfo">
        <p style="padding: 0.2rem; text-align: center; font-size: 14px; color: #fff">共查询有{{ num }}条记录</p>
        <van-cell-group inset v-for="(item, index) in list" :key="item.id" :border="false">
          <van-cell title="订单状态" :value="item.state.state" />
          <van-cell title="订单编号" :value="item.id" />
          <van-cell title="创建时间" :value="formatDateTime(item.create)" />
          <van-cell v-if="item.state.state === '受理失败' && index == 0 && list1.length" class="recomBack">
            <div class="card-content list">
              <span style="color: #000; margin-left: 0.8rem; vertical-align: middle" @click="changeCombo"
                ><el-icon style="font-size: 18px; color: #409eff"><Refresh /></el-icon>
                <el-link type="primary" style="font-weight: 700; font-size: 16px; margin-top: -10px"
                  >换一批</el-link
                ></span
              >
              <div class="card-scroll">
                <van-cell v-for="item in list1" :key="item.id" style="margin-bottom: 0.1rem">
                  <van-card :desc="item.desc" :thumb="`${BASEURL}${item.heImage}`" :centered="false">
                    <template #title>
                      <van-tag plain type="primary" class="tagY" v-if="item.tag">{{ item.tag }}</van-tag>
                      <span style="font-weight: 700; font-size: 14px">{{ item.name }}</span>
                    </template>
                    <template #bottom>
                      <img
                        style="width: 110px; height: 49px"
                        src="@/assets/layout/similar-switch.png"
                        alt=""
                        @click="sureChnage(item)"
                      />
                    </template>
                  </van-card>
                </van-cell>
              </div>
            </div>
          </van-cell>
          <van-cell title="联系方式" :value="item.takeMobile" />
          <van-cell title="身份证号" :value="item.cardId" />
          <van-cell v-if="item.logisticsCompany" title="物流公司" :value="item.logisticsCompany" />
          <van-cell v-if="item.logisticsId" title="物流单号" :value="item.logisticsId" />
          <van-cell v-if="item.note" title="状态描述" :value="item.note" />
          <van-cell v-if="index == 0">
            <van-button round size="small" style="font-size: 14px" @click="changeRecord(item)">切换记录</van-button>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <van-popup
      v-model:show="showChangeRecord"
      round
      position="bottom"
      closeable
      close-icon="close"
      :safe-area-inset-top="true"
      style="background-color: #eee; padding: 0.2rem"
      class="changePup"
    >
      <div class="title">
        <span style="margin-left: 20px; font-weight: 600">切换记录</span>
        <template v-if="changeRecordList.length">
          <div
            style="background-color: #fff; padding: 0.1rem; margin-top: 0.1rem; border-radius: 0.1rem"
            v-for="item in changeRecordList"
            :key="item.id"
          >
            <p>
              <van-button size="mini" type="primary" style="vertical-align: top">换后</van-button>
              <b style="vertical-align: middle; margin-left: 5px">{{ item.packName2 }}</b>
            </p>
            <p>
              <van-button size="mini" style="vertical-align: top">换前</van-button>
              <b style="vertical-align: middle; margin-left: 5px">{{ item.packName1 }}</b>
            </p>
            <p>
              <span>切换时间：</span>
              <span>{{ formatDateTime(item.createTime) }}</span>
            </p>
            <p>
              <span>操作人：</span>
              <span>{{ item.userName }}</span>
            </p>
          </div>
        </template>
        <template v-else>
          <el-empty :image-size="200" />
        </template>
      </div>
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.form {
  width: 7rem;
  // height: 7rem;
  position: relative;
  // top: 35%;
  left: 50%;
  margin-left: -3.5rem;
}
.bg {
  position: relative;
  width: 100%;
  max-width: 750px;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, #7cc1ff, #3b99f1);
}
.recomBack {
  height: 392px;
  background: url("http://fansitexitong.cn/images/tjtc.png") no-repeat;
  background-size: 100% 100%;
}
.orderlist {
  p {
    font-size: 12px;
    line-height: 1.5em;
    padding-left: 0.4rem;
  }
}
.mb {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
}
:deep(.van-popup--center.van-popup--round) {
  width: 80%;
}
:deep(.van-cell-group--inset) {
  margin-bottom: 0.1rem;
}
.orderInfo {
  :deep(.van-cell-group) {
    background-color: transparent;
    margin: 0;
    margin-bottom: 0.1rem;
  }
  :deep(.van-cell) {
    margin-bottom: -1px;
    // border: 1px solid #2c96ff;
  }
}
:deep(.van-cell:after) {
  border-bottom: 0;
}
.card-content {
  box-sizing: border-box;
  padding: 18.26% 2% 2% 2%;
}
.card-scroll {
  height: 260px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.list {
  box-sizing: border-box;
  // margin-top: 0.1rem;
  :deep(.van-card) {
    padding: 0;
    background-color: #fff;
  }
  :deep(.van-cell) {
    border-radius: 0.2rem;
    margin-bottom: -1px;
    // border: 1px solid #2c96ff;
  }
  .actItem {
    border: 1px solid #0e85fc;
  }
  .tagY {
    background: linear-gradient(137deg, #fa9d5d, #ff3162);
    border-radius: 2px;
    color: #fff;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    margin-right: 10px;
    padding: 3px 7px;
    z-index: 9;
    font-size: 12px;
  }
  .list-box {
    height: 5.3rem;
    overflow: hidden;
    overflow-y: auto;
  }
  :deep(.van-card__thumb) {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  :deep(.van-card__bottom) {
    text-align: right;
  }
  :deep(.van-ellipsis) {
    overflow: initial !important;
    white-space: initial !important;
    text-overflow: initial !important;
    color: #000 !important;
    font-size: 14px !important;
  }
}
:deep(.van-card__content) {
  text-align: left;
}
.changePup {
  .title {
    font-size: 16px;
    padding-top: 0.2rem;
  }
  .title::before {
    content: "";
    position: absolute;
    left: 15px;
    width: 4px;
    height: 16px;
    top: 0.5rem;
    background: #06f;
    border-radius: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
</style>
